<template>
    <div>
        <div class="Tabs">
            <div class="TabsView" v-if="list.tabs&&list.tabs.length > 0" :style="{'background': list.BgColor}">
                <div v-for="(item,index) in list.tabs" :key="index">
                    <div class="TabsItem">
                        <div style="padding: 14px 12px;" v-if="list.Style == 'One'">
                            <span class="TabsName" :style="{color: index == current?list.SelectColor:list.FontColor,}">{{item.name}}</span>
                            <div class="TabsLine" :style="{'border-color': index == current?list.LineColor:'#fff'}"></div>
                        </div>
                        <div v-else class="TabsTwo" style="background: #E6B738;" :style="{background: index == current?list.BgCurrentColor:'',}">
                            <span :style="{color: index == current?list.SelectColor:list.FontColor,}">{{item.name}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else style="padding: 20px;color:#999">
                请添加标签
            </div>
        </div>
        <div class="product" :class="className">
            <template v-if="data.data && data.data.length > 0">
                <div class="product-item" v-for="(item, index) in data.data" :key="index">
                    <div class="image">
                        <img :src="item.productImg">
                    </div>
                    <div class="info">
                        <p class="name">{{ item.productName }}</p>
                        <p class="num">
                            {{ options.volumeStr ? item.volumeStr + ' 已购买' : '' }} {{ line }} {{ options.goodRatio ? item.goodRatio + '99%' : '' }}
                        </p>
                        <p class="price">
                            <span>￥{{ item.productPrice }}</span>
                            <span v-if="options.originalPrice">￥{{ item.originalPrice }}</span>
                        </p>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="product-item product-default" v-for="index in 4" :key="index">
                    <div class="image">
                        <img src="https://img.quanminyanxuan.com/other/21188f7a1e9340759c113aa569f96699.jpg?x-oss-process=image/resize,h_600,m_lfit" alt="">
                    </div>
                    <div class="info">
                        <p class="name">这是商品名称</p>
                        <p class="num">
                            <!-- 12124 已购买 | 99% -->
                            <span v-if="data.options.volumeStr">121 付款</span>
                            <!-- <span v-if="data.options.volumeStr && data.options.goodRatio"> | </span> -->
                            <!-- <span v-if="data.options.goodRatio">99%</span> -->
                        </p>
                        <p class="price">
                            <span style="display: block;">￥9.99</span>
                            <span v-if="data.options.originalPrice">￥6.99</span>
                        </p>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Product',
        props: ['data', 'className'],
        data() {
            return {
                list: {},
                current: 0,
            }
        },
        computed: {
            options() {
                return this.data.options
            },
            line() {
                return this.options.volumeStr && this.options.goodRatio ? '| ' : ''
            }
        },
        mounted() {
            this.list = this.data
        },
    }
</script>

<style lang="less" scoped>
    .Tabs {
        .TabsView {
            padding: 0 10px;
            box-sizing: border-box;
            /* width: 400px; */
            /* overflow-x: auto; */
            display: flex;
            align-items: center;

            .TabsItem {
                width: max-content;
                position: relative;
                /* padding: 14px 12px; */

                .TabsName {
                    /* color: #E6B738; */
                }

                .TabsLine {
                    border-bottom: 4px solid;
                    width: 30px;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }

            .TabsTwo {
                padding: 4px 16px;
                border-radius: 30px;
                margin: 10px 5px 10px 0;
            }
        }
    }

    .product {
        display: flex;
        flex-wrap: wrap;
        padding: 4px 8px;
        box-sizing: border-box;
        background: #FFFFFF;

        * {
            box-sizing: border-box;
        }

        &.one .product-item {
            width: 100%;
            padding: 10px;
            display: flex;
            border-bottom: 1px dashed #eee;

            .image {
                width: 100px;
                height: 100px;
                border-radius: 10px;
                overflow: hidden;
                margin-right: 10px;
            }

            .info {
                padding: 0 5px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex: 1;

                .price {
                    font-size: 20px;
                    margin: 6px 0 0;
                }

                .num {
                    margin: 0px 0 0;
                }
            }
        }

        &.three .product-item {
            width: 33.33%;

            &.product-default:nth-of-type(4) {
                display: none;
            }

            .info .price {
                font-size: 16px;
            }

            &.product-default:nth-of-type(3) {
                display: block;
            }
        }

        .product-item {
            width: 50%;
            padding: 5px;

            &.product-default:nth-of-type(3) {
                /* display: none; */
            }

            .image {
                font-size: 0;

                img {
                    max-width: 100%;
                    border-radius: 10px;
                    overflow: hidden;
                }
            }

            .info {
                padding: 10px 0px 0px 2px;

                .name {
                    font-size: 14px;
                    margin: 0;
                    color: #333;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    margin-bottom: 6px;
                    /* height: 38px; */
                    /* line-height: 18px; */
                }

                .num {
                    font-size: 12px;
                    color: #999;
                    font-weight: 600;
                }

                .price {
                    font-weight: 600;
                    margin: 6px 0;
                    font-size: 18px;

                    span:nth-of-type(1) {
                        color: red;
                    }

                    span:nth-of-type(2) {
                        color: #b5b5b5;
                        font-weight: 400;
                        font-size: 12px;
                        margin-left: 4px;
                        text-decoration: line-through;
                    }
                }
            }
        }
    }
</style>